<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    let router_index = router.currentRoute._value.name;
    let list = reactive({
      nav_index: 1,
      lists: [
        {
          id: 0,
          name: "书城",
          img1: require("../assets/img/an8.png"),
          img2: require("../assets/img/an7.png"),
          urllist:'bookshelf'
        },
          {
            id: 1,
            name: "书架",
            img1: require("../assets/img/an6.png"),
            img2: require("../assets/img/an5.png"),
            urllist:'home'
          },
        {
          id: 2,
          name: "分类",
          img1: require("../assets/img/an9.png"),
          img2: require("../assets/img/an10.png"),
          urllist:'leaderboard'
        },
        {
          id: 3,
          name: "赚钱",
          img1: require("../assets/img/an1.png"),
          img2: require("../assets/img/an0.png"),
          urllist:'make'
        },
        {
          id: 4,
          name: "我的",
          img1: require("../assets/img/an3.png"),
          img2: require("../assets/img/an2.png"),
          urllist:'my'
        },
      ],
    });

    list.lists.forEach(item =>{
      if (router_index == item.urllist) {
        list.nav_index = item.id
      }
    })

    let btnFun = (id) => {
      let index = list.lists.findIndex(item => item.id == id)
      list.nav_index = id;
        router.push("/"+list.lists[index].urllist+"");
    };

    return {
      ...toRefs(list),
      btnFun,
    };
  },
};
</script>

<template>
  <div class="navfooter">
    <div @click="btnFun(item.id)" :class="nav_index == item.id? 'con' : ''" v-for="(item) in lists" :key="item.id">
      <i v-if="nav_index != item.id"><img :src="item.img1" alt="" /></i>
      <i v-if="nav_index == item.id"><img :src="item.img2" alt="" /></i>
      <li>{{item.name}}</li>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-top: 2px solid #f2f3f5;
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  div {
    padding: 5px 0;
    width: 20%;
    text-align: center;
    font-size: 12px;
    color: #9999ac;
    transition: all 0.2s linear;
    i {
      display: block;
      height: 22px;
      img {
        height: 100%;
        display: inline-block;
      }
    }
  }
  .con {
    color: #25db83;
  }
}
</style>